<template>
    <div class="body">
        <header class="header">
            <div class="user">
                <img :src="initInfoValue.avatar">
                <h3>{{ initInfoValue.userName }}</h3>
                <p>{{ initInfoValue.signature }}</p>
            </div>

            <nav class="navbar">
                <router-link to="/layout/home">首页</router-link>
                <a @click="scrollToSection('info')">信息</a>
                <a @click="scrollToSection('articleList')">文章</a>
            </nav>
        </header>
        <div id="menu" @click="handlemenu">
            <ThMenu v-if="menuflag"></ThMenu>
            <ThClose v-else></ThClose>
        </div>

        <userInfo id="info" :initInfoValue="initInfoValue"></userInfo>
        <articleList id="articleList"></articleList>
    </div>
</template>

<script setup>
import { ThMenu, ThClose } from '@kalimahapps/vue-icons';
import { ref, watch, onMounted } from 'vue';
import userInfo from '@/components/Person/userInfo.vue';
import articleList from '@/components/Person/article.vue';
import { useUserInfoStore } from '@/store/userInfo/index.js'

let menuflag = ref(true)
const handlemenu = () => {
    menuflag.value = !menuflag.value
    let header = document.querySelector('.header')
    header.classList.toggle('active')
}

const scrollToSection = (val) => {
    const section = document.getElementById(val);
    if (section) {
        section.scrollIntoView({ behavior: 'smooth' });
    }
}

const initInfoValue = ref()
watch(() => useUserInfoStore().userInfo,
    () => {
        initInfoValue.value = useUserInfoStore().userInfo
    }, { deep: true, immediate: true })

onMounted(() => {
    scrollToSection('info')
})

</script>

<style lang="scss" scoped>
.body {
    padding-left: 30rem;
    background-color: #e6e6e6;
}

.header {
    position: fixed;
    top: 0;
    background: #e6e6e6;
    left: 0;
    border-right: .1rem solid rgba(0, 0, 0, .2);
    z-index: 190;
    width: 30rem;
    height: 100%;
    padding: 2rem;
    text-align: center;
}

.header .user img {
    margin: 1rem 0;
    border-radius: 50%;
    height: 18rem;
    width: 18rem;
    border: 1rem solid transparent;
    box-shadow: .4rem .4rem 1rem #ccc,
        -.4rem -.4rem 1rem #fff;
}

.header .user h3 {
    color: #222;
    font-size: 2.5rem;
}

.header .user p {
    color: #27ae60;
    font-size: 1.5rem;
    margin-top: 1rem;
}

.header .navbar {
    padding-top: 1rem;

    a {
        display: block;
        margin: 1.5rem 0;
        padding: .7rem;
        border-radius: 5rem;
        cursor: pointer;
        font-size: 2rem;
        color: #333;
        box-shadow: .4rem .4rem 1rem #ccc,
            -.4rem -.4rem 1rem #fff;

        &:hover {
            color: orange;
            box-shadow: .4rem .4rem 1rem #ccc inset,
                -.4rem -.4rem 1rem #fff inset;
        }
    }
}

#menu {
    position: fixed;
    top: 1.5rem;
    left: 2rem;
    height: 5rem;
    width: 5rem;
    z-index: 9575;
    line-height: 5rem;
    border-radius: 50%;
    font-size: 2.5rem;
    cursor: pointer;
    box-shadow: .4rem .4rem 1rem #ccc,
        -.4rem -.4rem 1rem #fff;
    text-align: center;
    color: #222;
    display: none;

    &:hover {
        color: orange;
        box-shadow: .4rem .4rem 1rem #ccc inset,
            -.4rem -.4rem 1rem #fff inset;
    }
}

section {
    min-height: 100vh;
    padding: 2rem;
}

@media (max-width:991px) {
    .header {
        left: -110%;
    }

    .body {
        padding-left: 0;
    }

    .header.active {
        left: 0;
        transition: .4s linear;
    }

    #menu {
        display: inline;
    }
}

@media (max-width:450px) {
    .header {
        width: 100%;
        border-right: 0;
    }
}
</style>